<!doctype html>

<title>在线评级计算模型</title>
<meta charset="utf-8" />
<link rel=stylesheet href="${ctxPath}/resource/doc/docs.css">

<link rel="stylesheet" href="${ctxPath}/resource/lib/codemirror.css">
<link rel="stylesheet"
	href="${ctxPath}/resource/addon/hint/show-hint.css">
<script src="${ctxPath}/resource/lib/codemirror.js"></script>
<script src="${ctxPath}/resource/addon/hint/show-hint.js"></script>
<script src="${ctxPath}/resource/addon/hint/xml-hint.js"></script>
<script src="${ctxPath}/resource/mode/xml/xml.js"></script>

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>

var editor = null;

</script>
<style type="text/css">
.CodeMirror {
	border: 1px solid #eee;
}
</style>
${layoutContent}

<p></p>		
<textarea id="tree" cols="80" rows="20">
</textarea>


<script>
	
	var tree={result: 6, name: "评级得分", nodes: [{result: null, name: "变量定义列表"}]}
	
		$(document).ready(function() {
			$("#run").bind("click", function() {
				var code = editor.getValue();
				$("#code").val(code);
				var input = $('#inputForm').serialize();
				$.ajax({
					type : "POST",
					dataType : "json",
					url : "${ctxPath}/run.json",
					data : input,
					success : function(result) {
						if(result.success){
							var treeData = result.data;
							$("#result").val(treeData);
							// 计算中间结果
							var message = result.message;
							$("#tree").val(message);
							
						}else{
							alert(result.message);
						}
						
					},
					error : function(data) {
						alert("error:" + data.responseText);
					}
				});
			});
			
			
			$("#validate").bind("click", function() {
                var code = editor.getValue();
                $("#code").val(code);
                var input = $('#inputForm').serialize();
                $.ajax({
                    type : "POST",
                    dataType : "json",
                    url : "${ctxPath}/validate.json",
                    data : input,
                    success : function(result) {
                        if(result.success){
                            var treeData = result.data;                          
                            var message = result.message;
                            $("#tree").val(message);
                            
                        }else{
                            alert(result.message);
                        }
                        
                    },
                    error : function(data) {
                        alert("error:" + data.responseText);
                    }
                });
            });

		});
	</script>
	<script>
		var dummy = {
			attrs : {
				color : [ "red", "green", "blue", "purple", "white", "black",
						"yellow" ],
				size : [ "large", "medium", "small" ],
				description : null
			},
			children : []
		};

		var tags = {
			"!top" : [ "top" ],
			"!attrs" : {
				id : null,
				class : [ "A", "B", "C" ]
			},
			top : {
				attrs : {
					lang : [ "en", "de", "fr", "nl" ],
					freeform : null
				},
				children : [ "animal", "plant" ]
			},
			animal : {
				attrs : {
					name : null,
					isduck : [ "yes", "no" ]
				},
				children : [ "wings", "feet", "body", "head", "tail" ]
			},
			plant : {
				attrs : {
					name : null
				},
				children : [ "leaves", "stem", "flowers" ]
			},
			wings : dummy,
			feet : dummy,
			body : dummy,
			head : dummy,
			tail : dummy,
			leaves : dummy,
			stem : dummy,
			flowers : dummy
		};

		function completeAfter(cm, pred) {
			var cur = cm.getCursor();
			if (!pred || pred())
				setTimeout(function() {
					if (!cm.state.completionActive)
						cm.showHint({
							completeSingle : false
						});
				}, 100);
			return CodeMirror.Pass;
		}

		function completeIfAfterLt(cm) {
			return completeAfter(
					cm,
					function() {
						var cur = cm.getCursor();
						return cm.getRange(
								CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
					});
		}

		function completeIfInTag(cm) {
			return completeAfter(
					cm,
					function() {
						var tok = cm.getTokenAt(cm.getCursor());
						if (tok.type == "string"
								&& (!/['"]/.test(tok.string
										.charAt(tok.string.length - 1)) || tok.string.length == 1))
							return false;
						var inner = CodeMirror.innerMode(cm.getMode(),
								tok.state).state;
						return inner.tagName;
					});
		}

	 editor = CodeMirror.fromTextArea(document.getElementById("code"), {
			mode : "xml",
			lineNumbers : true,
			extraKeys : {
				"'<'" : completeAfter,
				"'/'" : completeIfAfterLt,
				"' '" : completeIfInTag,
				"'='" : completeIfInTag,
				"Ctrl-Space" : "autocomplete"
			},
			hintOptions : {
				schemaInfo : tags
			}
		});
	</script>
</article>
